<template>
    <main>
        <header class="header">
            <h3>欢迎注册</h3>
            <p>沟通，连接你我</p>
        </header>
        <article>
            <Form 
                :model="formData"
                @onSubmit="handleSubmit"
                :rules="rules"
            >
                <FormItem name="mobile" label="手机号">
                    <Input 
                        placeholder="请输入手机号" 
                        :myStyle="formItemStyle"
                        v-model="formData.mobile"
                        type="password"
                    />
                </FormItem>
                <FormItem name="password" label="密码">
                    <Input 
                        placeholder="请输入密码" 
                        :myStyle="formItemStyle"
                        v-model="formData.password"
                        type="password"
                    />
                </FormItem>
                <FormItem>
                    <button class="btn" type="submit">立即注册</button>
                </FormItem>
            </Form>
        </article>
    </main>
</template>

<script>
import { Input,Form,FormItem } from '../../../components'
export default {
    name:'UserForm',
    components:{
        Input,
        Form,
        FormItem
    },
    data(){
        return {
            formItemStyle:{
                width: '400px',
                height: '48px',
            },
            formData:{
                mobile: '',
                password: ''
            },
            rules:{
                mobile:[
                    (value) => {
                        console.log(value);
                        return Promise.resolve()
                    }
                ]
            },
        }
    },
    methods:{
        handleInput(dataType,value){
            console.log(dataType,value);
            this.formData[dataType] = value
        },
        handleSubmit(){
            console.log(this.formData);
        },
        handleFocus(){
            console.log('focus');
        }
    }
}
</script>

<style lang='less' scoped>
    .header {
        margin-bottom: 48px;
        h3 {
            font-size: 30px;
            font-weight: 500;
        }
        p {
            font-size: 20px;
        }
    }
    .btn {
        width: 100%;
        height: 48px;
        background: rgb(53, 53, 224);
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;

        &:hover {
            background-color: rgb(74, 87, 234);
        }
    }
</style>